<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
{#<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>#}
</head>
<body>

<div>
    <ul class="nav nav-pills">
      <li role="presentation"><a href="{% url 'login' %}">登录</a></li>
     <!-- <li role="presentation"><a href="#">注册</a></li>-->
      <li role="presentation" class="active"><a href="{% url 'reg' %}">注册</a></li>
    </ul>
</div>
<div class="container">
    <form method="post">
        <h2 class="form-signin-heading">注册</h2>
        账号：<input type="text" placeholder="请输入用户名" name="username" id="uname">
        <br/><br/>
        密码：<input type="text" placeholder="请输入密码" name="password" id="pwd">
        <br/><br/>
        确认密码：<input type="text" placeholder="再次输入密码" name="cpassword" id="cpwd">
        <br/><br/>
        邮箱：<input type="text" placeholder="请输入邮箱" name="email" id="email">
        <br/><br/>

    <div class="checkbox">
      <label>
          <input id="t1" name="t1" type="checkbox"> 以老师身份注册
      </label>
    </div>

        <div id="embed-captcha"></div>
    <p id="wait" class="show">正在加载验证码......</p>
    <p id="notice" class="hide">请先拖动验证码到相应位置</p>

    <br>
        {{ err }}
{#    <input class="btn" id="embed-submit" type="submit" value="提交">#}
        <button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
    </form>
</div>


<!-- 为使用方便，直接使用jquery.js库，如您代码中不需要，可以去掉 -->
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>

<script>
    var handlerEmbed = function (captchaObj) {
        $("#embed-submit").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });

</script>

{#<script>#}
{##}
{##}
{#    $(function () {#}
{##}
{#        var error_name = false;#}
{#        var error_password = false;#}
{#        var error_check_password = false;#}
{#        var error_email = false;#}
{##}
{#        var user = $('#uname');#}
{#        var pwd = $('#pwd');#}
{#        var cpwd = $('#cpwd');#}
{#        var email = $('#email');#}
{#        var subimt = $('#subimt');#}
{##}
{##}
{#        user.blur(function () {#}
{#            check_user_name();#}
{#            if (error_name === true) {#}
{#                var users = user.val();#}
{#                $.ajax({#}
{#                    type: 'GET',#}
{#                    url: 'http://127.0.0.1:8000/user/v_u/',#}
{#                    data: 'username=' + users,#}
{#                    dataType: 'json',#}
{#                    success: function (data) {#}
{#                        console.log(data.result);#}
{#                        if (data.result === 'true') {#}
{#                            error_name = true;#}
{#                            user.next().show().html('正确');#}
{##}
{#                        } else {#}
{#                            user.next().show().html('账号已存在');#}
{#                            error_name = false;#}
{##}
{#                        }#}
{#                    }#}
{#                })#}
{#            }#}
{#        });#}
{##}
{#        function check_user_name() {#}
{#            var vals = user.val();#}
{#            var re = /^[a-zA-Z0-9_-]{4,16}$/;#}
{#            if (vals === '') {#}
{#                user.next().show().html('用户名不可为空');#}
{#                error_name = false;#}
{##}
{#            }#}
{#            if (re.test(vals)) {#}
{#                user.next().show().html('格式正确');#}
                {#user.next().show().html('格式正确');#}
{#                error_name = true;#}
{#            } else {#}
{#                user.next().show().html('用户名不符合规范');#}
{#                error_name = false#}
{#            }#}
{#        }#}
{##}
{#        pwd.blur(function () {#}
{#            check_pwd();#}
{#        });#}
{#        #}
{#        function check_pwd() {#}
{#            var vals = pwd.val();#}
            {#var re = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;#}
{#            var re = /^[a-zA-Z0-9_-]{4,16}$/;#}
{#            if (vals === '') {#}
{#                pwd.next().show().html('密码不可为空');#}
{#                error_password = false;#}
{#                return#}
{#            }#}
{#            if (re.test(vals)) {#}
{#                pwd.next().show().html('');#}
{#                error_password = true#}
{#            } else {#}
{#                pwd.next().show().html('最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符');#}
{#                error_password = false#}
{#            }#}
{#        }#}
{##}
{##}
{#        cpwd.blur(function () {#}
{#            check_cpwd();#}
{#        });#}
{##}
{##}
{#        function check_cpwd() {#}
{#            var cvals = cpwd.val();#}
{#            var pcals = pwd.val();#}
{##}
{#            if (cvals === '') {#}
{#                cpwd.next().show().html('此处不可为空');#}
{#                error_check_password = false;#}
{#                return#}
{#            }#}
{#            if (cvals === pcals) {#}
{#                cpwd.next().show().html('');#}
{#                error_check_password = true;#}
{#            } else {#}
{#                cpwd.next().show().html('两次密码不一致');#}
{#                error_check_password = false#}
{#            }#}
{##}
{#        }#}
{##}
{##}
{#        email.blur(function () {#}
{#            check_email();#}
{#        });#}
{##}
{#        // 手机.....#}
{##}
{#        function check_email() {#}
{#            var vals = email.val();#}
{#            var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;#}
{#            if (vals === '') {#}
{#                email.next().show().html('邮箱不可为空');#}
{#                return false#}
{#            }#}
{#            if (ePattern.test(vals)) {#}
{#                email.next().show().html('');#}
{#                error_email = true#}
{#            } else {#}
{#                email.next().show().html('邮箱格式不正确');#}
{#                error_email = false#}
{#            }#}
{#        }#}
{##}
{##}
{#        subimt.click(function () {#}
{#            console.log(error_name);#}
{#            console.log(error_password);#}
{#            console.log(error_check_password);#}
{#            console.log(error_email);#}
{#            if (error_name === true && error_password === true && error_check_password === true && error_email === true) {#}
{#                return true#}
{#            } else {#}
{##}
{#                console.log('*************************88');#}
{#                console.log(error_name);#}
{#                console.log(error_password);#}
{#                console.log(error_check_password);#}
{#                console.log(error_email);#}
{#                subimt.next().show().html('信息不完整');#}
{#                return false#}
{#            }#}
{##}
{##}
{#        })#}
{##}
{##}
{#    })#}
{#</script>#}



<script>

  $(function () {

        //1打开页面时验证必填项
        $('form input.required').each(function () {
            //console.log($(this).val());
            var txt = $(this).val();
            if (txt == '' || txt.length == 0 ) {
                $(this).siblings('span').first().html('*')
            }
        });
        //2失去焦点
        $('form :input').blur(function (event) {
            //删除*号
            $(this).parent().find('.msg').remove();

            //用户名
            console.log('是否是用户名' + $(this).is('#uname'));
            if ($(this).is('#uname')) {
                var uname = $(this).val();
                if (uname == '' || uname.length == 0 || uname.length < 2) {
                    $(this).after("<span class='msg'>账户格式不正确</span>");
                    send = false;
                } else {
                    $(this).after("<span class='msg'>账户正确</span>")
                }
            }
            if ($(this).is('#pwd')) {
                var pwd = $(this).val();
                var regPwd = /^.*(?=.{6,}).*$/;


                if (pwd == '' || pwd.length == 0 || regPwd.test(pwd) == false) {
                    $(this).after("<span class='msg'>密码不合法</span>");
                    send = false;
                } else {
                    console.log(pwd)
                    $(this).after("<span class='msg'>密码正确</span>")
                }
            }
            if ($(this).is('#cpwd')) {
                var cpwd = $(this).val();
                var regPwd = /^.*(?=.{6,}).*$/;

                if (cpwd != pwd) {
                     console.log(pwd)

                     console.log(cpwd)

                    $(this).after("<span class='msg'>密码正确</span>");
                } else {
                    $(this).after("<span class='msg'>密码不一致</span>");
                                        send = false;

                }
            }
            if ($(this).is('#email')) {
                var email = $(this).val();
                var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
                if (email == '' || email.length == 0 || reg.test(email) == false) {
                    $(this).after("<span class = 'msg'>邮箱格式不正确</span>");
                    send = false
                } else {
                    $(this).after("<span class ='msg'>邮箱正确</span>")
                }
            }
            //密码
            //密码....手机....邮箱....
        }).keyup(function (event) {
            console.log("抬起直接调用blur....");
            $(this).triggerHandler('blur')
        }).focus(function (event) {
            $(this).triggerHandler('blur')
        });
        //3表单提交时,各种规则验证
        $('form').submit(function (event) {
            var isGo = true;
            //判断,失败标记值=false
            $('input.required').each(function () {
                zhi = $(this).val().trim(); //去空格.
                if (zhi == '' || zhi.length == 0) {
                    isGo = false;
                }
            });
            return isGo;
        });
    })
</script>

</body>
</html>

